<template>
	<view class="container999">
		<view class="title">个人信息</view>
		<view class='line'>
			<view class='lineLeft'>姓名</view>
			<view class="lineRight">
				<!-- data-name为自定义参数名称,同时也会以此为参数名存入data的form中-->
				<input class="input" v-model="form.username" data-name="name" placeholder-class="plaClass"
					placeholder='请输入姓名'></input>
			</view>
		</view>
		<view class='line'>
			<view class='lineLeft'>手机号</view>
			<view class="lineRight">
				<input class="input" v-model="form.shouji" data-name="phone" placeholder-class="plaClass"
					placeholder='请输入手机号'></input>
			</view>
		</view>
		
		<view class='line' style="margin-top: 2rem;">
			<view class='lineLeft'>头像</view>
			<view class="lineRight">
				<view>
					<upload-file v-model="form.avatar_url"></upload-file>
				</view>
			</view>
		</view>
		<view class="buttonBox" @click="saveProfile">
			提交
		</view>
		<!-- 新增退出登录按钮 -->
		<view class="logoutButton" @click="logout">
			退出登录
		</view>
	</view>
</template>



<script>
	import {
		httpResources
	} from "@/tool/index.js"
	import {
		renyuan
	} from "@/request/API/xinwentongzhi/index";
	import uploadFile from '@/components/uploadFile.vue'
	import {
		xiugaixinxi
	} from "@/request/API/userInfo/index.js"
	export default {
		components: {
			uploadFile
		},
		data() {
			return {
				form: {},
				obj: {},
				username: ''
			};
		},
		onLoad() {
			this.obj = uni.getStorageSync("user");
			this.username = this.obj.username
		},
		onShow() {
			this.userinfos()
		},
		methods: {
			httpResources(path){
				return httpResources(path)
			},
			userinfos() {
				renyuan({
					username: this.username
				}).then(res => {
					let obj = res;
					let avatar_url = obj.avatar_url;
					this.form = obj;

				})
			},
			saveProfile() {
				xiugaixinxi(this.form).then(res => {
					if (!Number(res.code)) {
						uni.showToast({
							title: '个人信息已更新',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除 Storage 中的用户信息
							uni.removeStorageSync("user");

							// 跳转到登录页面（不可返回）
							uni.reLaunch({
								url: '/pages/login/index' // 替换为实际的登录页面路径
							});
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.plaClass {
		color: #dbdbdb;
	}

	.container999 {
		.title {
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 4%;
			border-bottom: 1px solid #f5f5f5;
		}

		.logoutButton {
			width: 91%;
			margin: 0 auto;
			height: 84rpx;
			border-radius: 84rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 200rpx;
			left: 0;
			right: 0;
			background-color: #ff573a;
		}

		.buttonBox {
			width: 91%;
			margin: 0 auto;
			height: 84rpx;
			border-radius: 84rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			background-color: #ff573a;
		}

		.tri {
			width: 0;
			height: 0;
			border-left: 8rpx solid transparent;
			border-right: 8rpx solid transparent;
			right: 30rpx !important;
			border-top: 16rpx solid #545151;
		}

		.line {
			margin-top: 30rpx;
			height: 100rpx;
			width: 92%;
			margin: 0 auto;
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.lineRight {
				.tips {
					color: #9a9a9c;
					font-weight: bold;
				}

				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
			}

			.lineLeft {
				display: flex;
				width: 20%;
				align-items: center;
				height: 100%;
				font-weight: bold;
				color: #000000;
			}

			.input {
				padding-right: 20rpx;
				height: 100%;
				width: 70%;
				text-align: left;
				font-size: 28rpx;
				color: #545151;
			}

			.picker {
				height: 100%;
				justify-content: flex-start;
				display: flex;
				align-content: center;
				width: 500rpx;
			}

			picker {
				height: 84rpx;
				line-height: 84rpx;
			}
		}

		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6b8082;
		position: relative;
	}
</style>